<template>
  <a-layout-sider class="aside">
    <a-menu
      :selectedKeys="activeRoute"
      mode="inline"
      :style="{ height: '100%', borderRight: 0 }"
    >
      <template v-for="(item, index) in list" :key="item.router">
        <a-menu-item
          v-if="!item.children?.length"
          :key="item.router"
          @click="item.router && $router.push(item.router)"
        >
          <template #icon v-if="item.icon">
            <component :is="item.icon" />
          </template>
          <span>{{ item.name }}</span>
        </a-menu-item>
        <a-sub-menu v-else :key="index" :title="item.name">
          <a-menu-item
            v-for="child in item.children"
            :key="child.router"
            @click="child.router && $router.push(child.router)"
          >
            <span>{{ child.name }}</span>
          </a-menu-item>
        </a-sub-menu>
      </template>
    </a-menu>
  </a-layout-sider>
  <a-layout-content class="content">
    <div class="card">
      <router-view :key="activeRoute[0]"></router-view>
    </div>
  </a-layout-content>
</template>
<script lang="tsx" setup>
import { VNode, computed, createVNode } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const list: MenuItem[] = [
  {
    name: "用户管理",
    icon: () => createVNode(<user-outlined />),
    children: [
      {
        name: "用户审核",
        router: "/backend/user/approval",
      },
      {
        name: "所有用户",
        router: "/backend/user",
      },
    ],
  },
  {
    name: "项目管理",
    icon: () => createVNode(<project-outlined />),
    children: [
      {
        name: "项目审核",
        router: "/backend/project/approval",
      },
      {
        name: "评审专家分配",
        router: "/backend/project/assign",
      },
      {
        name: "所有项目",
        router: "/backend/project",
      },
    ],
  },
  {
    name: "指标库管理",
    icon: () => createVNode(<user-outlined />),
    children: [
      {
        name: "指标库审核",
        router: "/backend/indicators/unapproval",
      },
      {
        name: "指标库发布",
        router: "/backend/indicators/unpublish",
      },
      {
        name: "所有指标库",
        router: "/backend/indicators/all",
      },
    ],
  },
];
const allMenuRoutes = list.reduce<string[]>((arr, item) => {
  if (!item.children?.length && item.router) {
    return arr.concat(item.router);
  }
  if (item.children?.length) {
    return arr.concat(
      item.children
        .map((child) => child.router)
        .filter((child) => child) as string[]
    );
  }
  return arr;
}, []);
const reg = new RegExp(allMenuRoutes.join("|"));
// 根据当前的基础路由判断激活的菜单项
const activeRoute = computed(() => [route.fullPath.match(reg)?.[0]]);
type MenuItem = {
  name: string;
  icon?: () => VNode;
  router?: string;
  children?: MenuItem[];
};
</script>
<style lang="scss" scoped>
.aside {
  position: fixed;
  left: 0;
  top: 64px;
  bottom: 0;
  background-color: #fff;
  width: 100px;
  z-index: 2;
}
.content {
  margin-left: 200px;
  height: auto;
  width: calc(100% - 200px);
}
.card {
  background-color: #fff;
  border-radius: 4px;
  padding: 24px;
  margin: 24px;
}
</style>
